<template>
  <ul class="todo-list" v-if="todoStore && todoStore.todos">
    <TodoItem
      v-for="todo in todoStore.todos"
      :key="todo.id"
      :todo="todo"
    />
  </ul>
  <div v-else style="text-align:center;color:#bbb;padding:24px 0;">暂无待办事项</div>
</template>

<script setup>
import { useTodoStore } from '../stores/todo'
import TodoItem from './TodoItem.vue'
const todoStore = useTodoStore()
</script>

<style scoped>
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style> 